Jsp页面
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=GB18030"> <scripttype="text/javascript"class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.3.2.js"></script> <scripttype="text/javascript"class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/testJquer1.js"></script> <styletype="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <title>Insert title here</title> </head> <body> <inputtype="button"value="保存"class="mini"name="ok"class="mini"/> <inputtype="button"value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/> <inputtype="button"value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> <inputtype="button"value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> <inputtype="button"value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> <inputtype="button"value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> <h1>天气冷了</h1> <h2>天气又冷了</h2> <divid="one">id为one</div> <divid="two"class="mini"> id为two class是 mini <divclass="mini">class是 mini</div> </div> <divclass="one"> class是 one <divclass="mini">class是 mini</div> <divclass="mini">class是 mini</div> </div> <divclass="one"> class是 one <divclass="mini01">class是 mini01</div> <divclass="mini">class是 mini</div> </div><br> <divid="mover">动画</div><br> <spanclass="spanone">span</span> </body> </html>Js代码
$(document).ready(function(){ //<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/> $("#b1").click(function(){ $("body div").css("background", "red"); }); //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/> $("#b2").click(function(){ $("body > div").css("background", "red"); }); //<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/> $("#b3").click(function(){ //id为one的下一个紧邻div节点（兄弟节点） $("#one+div").css("background", "red"); //没有选取到节点，因为id为one的元素下一个节点不是span $("#one+span").css("background", "red"); //id为one的下一个元素 $("#one+*").css("background", "red"); }); //<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/> $("#b4").click(function(){ //$("#two~div").css("background", "red"); //id为two的元素后所有兄弟元素 $("#two~*").css("background", "red"); }); //<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/> $("#b5").click(function(){ $("#two").siblings("div").css("background", "red"); }); });
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦